import React from "react"
import ReactDOM from "react-dom"
import Clipboard from "clipboard";
import AJAX from '../../lib/ajax'
require('./AdBlock.less')

class AComponentForTest extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            img_loaded: null,
        }
        this.analysis = this.analysis.bind(this)
        this.handleImgLoaded = this.handleImgLoaded.bind(this)
    }

    componentWillMount() {
        // type : 1 推送消息和已取件详情页面、2 首页、3 文字广告、4 未取件详情页面、5 待开箱页面、6 开箱结果页面
        const { type } = this.props
        this.setState({
            type: parseInt(type),
        })
        this.fetch(type)
    }

    componentDidMount() {
        new Clipboard('.clip');
    }

    /**
     * 
     * @param {*} advertId 广告id
     * @param {*} type 2: 点击; 3: 曝光; 4: 跳转;
     */
     fetchSaveAdvert(advertId, type) {
        const params = {
            advertId: advertId,
            type: type,
        };
        AJAX.request('advertSave', params, (data) => {
            const { code, body } = data;
            if (code === 0) {
                console.log('记录成功', body);
            }
        });
    }

    fetch(type) {
        AJAX.request('get_advert_detail', { type }, (data) => {
            this.setState({
                id: data.body.id,
                imgSrc: data.body.img,
                link: data.body.url
            });
            if (data.body.id) {
                this.stat_advert();
                this.fetchSaveAdvert(data.body.id, 3);
            }
        })
    }

    stat_advert() { // 查看广告
        const { id } = this.state;
        if (id) {
            AJAX.request('stat_advert', { advert_id: id, action: 2 })
        }
    }

    analysis() { // 点击广告
        const { id, link } = this.state
        if (link && id) {

            this.fetchSaveAdvert(id, 2);
            AJAX.request('stat_advert', { advert_id: id, action: 1 }, () => {
                if (link.indexOf('http') === 0) {
                    window.location.href = link
                } else {
                    window.location.href = "//" + link
                }
            })
        }
    }

    handleImgLoaded() {
        this.setState({
            img_loaded: true,
        })
    }

    render() {
        const { imgSrc, img_loaded, type } = this.state;

        let content = <div></div>

        if (imgSrc) {
            content =
                <div className="adb">
                    {
                        // [1, 2, 3].includes(type) && 
                        <a href="javascript:;" onClick={this.analysis}>
                            <div className="adb-wrap">
                                <img onLoad={this.handleImgLoaded} src={imgSrc} alt="recommand" />
                                {
                                    img_loaded && <div className="adb-text"> 广告 </div>
                                }
                            </div>
                        </a>
                    }
                    {
                        // [4, 5, 6].includes(type) && 
                        // <a href="javascript:;" className="clip" onClick={this.analysis} data-clipboard-text="￥4OSjYFozf0A￥">
                        //     <div className="adb-wrap">
                        //         <img onLoad={this.handleImgLoaded} src={imgSrc} alt="recommand"/>
                        //         {
                        //             img_loaded && <div className="adb-text"> 广告 </div>
                        //         }
                        //     </div>
                        // </a>
                    }
                </div>
        }
        return content
    }
}

module.exports = AComponentForTest